<meta charset="utf-8">
<style>
    .button{
        text-decoration: none;
        display: inline-block;
        padding: 8px 10px 8px 10px;
        background: #767676;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        border-radius: 5px;
        color: white;
    }
    
    .button:hover{
        background: #8B8B8B;
    }
    
    .link {
        color: #A5A5A5;
        font-size: 13px;
        display: inline-block;
        margin: 10px 0 0 0;
        -webkit-font-smoothing: antialiased;
    }
    .link:hover{
        color: #888;
    }
</style>

<div style="position:absolute;left:0;top:0;right:0;bottom:0;
    background: url({{staticPrefix}}/../c9.ide.layout.classic/images/loadingbgrepeat.png);
    background-size: 1px 8px;
    cursor: pointer;
">
    <div style="font-family: arial;position:absolute;left:50%;top:50%;text-align: center;width: 200px;height: 60px;margin-left: -100px;margin-top: -30px;">
        <a class="button">Click to load the page</a>
        <a href="https://community.c9.io/t/why-doesnt-the-embedded-preview-of-my-app-load-right-when-i-open-my-workplace/2556" class="link" target="_blank" onclick="event.cancelBubble=true;">Why am I seeing this?</a>
    </div>
</div>